<template>
  <div class="login-wrapper">
    <div class="modal">
      <div class="title"><img class="logo" src="/images/logo.png" alt="" /></div>
      <el-form :model="loginForm" ref="formRef" :rules="rules" class="form-box">
        <el-form-item prop="phone">
          <el-input type="text" v-model="loginForm.phone" placeholder="请输入账号" size="large">
            <template #prepend>
              <el-button class="input-icon">
                <el-icon :size="20">
                  <User />
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pws">
          <el-input type="text" v-model="loginForm.pws" placeholder="请输入密码" size="large" show-password>
            <template #prepend>
              <el-button class="input-icon">
                <el-icon :size="20">
                  <Lock />
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" size="large" @click="loginFun">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import { encode } from 'js-base64'
// import md5 from "js-md5"
import { useStore } from 'vuex'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@api/login'
import { ElMessage } from 'element-plus'
import { Avatar } from '@element-plus/icons-vue'
import { useUserStore } from '@/pinia/user'

const userStore = useUserStore()
const router = useRouter()

const loginForm = ref({
  phone: '',
  pws: ''
})

const formRef = ref()

const rules = reactive({
  phone: [{ required: true, message: '账号不能为空!', trigger: 'blur' }],
  pws: [{ required: true, message: '密码不能为空!', trigger: 'blur' }]
})

//登录
async function loginFun() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let { phone, pws } = loginForm.value
      let res = await login({ phone, pws: encode(pws, '313131#%%520asdlfj') })

      if (res.code == 200) {
        userStore.login(res.data)
        router.push({ path: '/home/index' })
      }
    }
  })
}

onMounted(() => {
  // console.log(encode(md5("123456", '313131#%%520asdlfj')))
})
</script>
<style lang="scss" scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
  background: url('/images/login-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center center;

  .modal {
    width: 450px;
    padding: 40px 0;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0px 10px 3px #ddd;

    .title {
      font-size: 24px;
      text-align: center;
      color: #020202;
      padding: 0px 0 18px 0;
      border-bottom: 1px dashed #c0c0c0;

      img {
        width: 190px;
      }
    }

    .login-btn {
      width: 100%;
      margin-top: 15px;
      background: linear-gradient(to right, #26d5b6, #1a89c0);
      border: none;
      height: 45px;
    }

    .form-box {
      padding: 35px 50px 0 50px;

      .el-form-item {
        margin-bottom: 25px;
      }
    }
  }

  .input-icon {
    @include flex(row, center, center);
  }
}
</style>
